<script setup>
import {onMounted, ref} from "vue";
import {closeConnection, listConnection} from "../../../http/rabbitmq/connection.js";
import {rabbitmqStore} from "../../../stores/counter.js";
import moment from "moment";

let connectionTableData = ref([])

function handleConnectionDelete(name) {
  closeConnection(name).then(response => {
    connectionTableData.value = response
  })
}

function handleConnectionList() {
  listConnection().then(response => {
    connectionTableData.value = response.items
  })
}

onMounted(() => {
  handleConnectionList()
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="Name">
          <el-input clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleConnectionList">Search</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        highlight-current-row
        :data="connectionTableData" border style="width: 100%;">
      <el-table-column prop="vhost" label="vhost" width="70"/>
      <el-table-column prop="name" label="name" min-width="100"/>
      <el-table-column prop="node" label="node" width="140"/>
      <el-table-column prop="user" label="user" width="80"/>
      <el-table-column prop="type" label="type" width="80"/>
      <el-table-column prop="protocol" label="protocol" width="110"/>

      <el-table-column prop="connected_at" label="connected_at" width="170">
        <template #default="scope">
          {{moment(parseInt(scope.row.connected_at)).format("yyyy-MM-DD HH:mm:ss").replace(' ', '\n')}}
        </template>
      </el-table-column>

      <el-table-column label="operations" width="100" fixed="right">
        <template #default="scope">
          <el-popconfirm
              width="230"
              hide-icon
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleConnectionDelete(scope.row)"
              :title="'是否删除Connection [ ' + scope.row.name + ' ] ？'">
            <template #reference>
              <el-button type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog title="connection manage" v-model="showConnectionForm" :close-on-click-modal="false" label-width="160px">
    <el-form ref="form" :model="connectionForm" label-width="160px">
      <el-form-item label="Virtual host">
        <el-select v-model="connectionForm.vhost">
          <el-option
              v-for="item in vhostList"
              :key="item.name"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="connectionForm.name"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="connectionForm.type">
          <el-option
              v-for="item in rabbitmqStore().connectionType"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否持久化">
        <el-select v-model="connectionForm.durable">
          <el-option
              v-for="item in rabbitmqStore().durable"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否自动删除">
        <el-select v-model="connectionForm.auto_delete">
          <el-option
              v-for="item in rabbitmqStore().auto_delete"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否为内部类型">
        <el-select v-model="connectionForm.internal">
          <el-option
              v-for="item in rabbitmqStore().internal"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleConnectionSave">Save</el-button>
        <el-button @click="showConnectionForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<style scoped>

</style>